// 全局 Element Plus 组件样式重写 - Global Element Plus Component Styles Override
// 遵循赛博朋克绿色主题设计规范

// 导入赛博朋克主题变量
@import './cyberpunk.scss';

// Element Plus 按钮组件样式重写
.el-button {
  background: $cyber-bg-glass !important;
  border: 1px solid $cyber-border-primary !important;
  border-radius: $cyber-radius-small !important;
  color: $cyber-text-primary !important;
  font-weight: 500 !important;
  transition: all $cyber-transition-normal ease !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;

  &:hover {
    background: rgba(50, 236, 138, 0.1) !important;
    border-color: $cyber-primary !important;
    box-shadow: $cyber-shadow-primary !important;
    color: $cyber-text-primary !important;
    transform: translateY(-2px) !important;
  }

  &:focus {
    background: rgba(50, 236, 138, 0.1) !important;
    border-color: $cyber-primary !important;
    box-shadow: $cyber-shadow-primary !important;
    color: $cyber-text-primary !important;
  }

  &:active {
    transform: translateY(0) !important;
  }

  &.el-button--primary {
    background: $cyber-gradient-primary !important;
    border-color: $cyber-primary !important;
    color: $cyber-text-primary !important;

    &:hover {
      background: linear-gradient(45deg, $cyber-primary-light, $cyber-primary) !important;
      border-color: $cyber-primary-light !important;
    }
  }

  &.el-button--success {
    background: $cyber-gradient-accent !important;
    border-color: $cyber-accent !important;
    color: $cyber-bg-primary !important;

    &:hover {
      background: linear-gradient(45deg, $cyber-accent-light, $cyber-accent) !important;
      border-color: $cyber-accent-light !important;
    }
  }

  &.el-button--danger {
    background: $cyber-gradient-secondary !important;
    border-color: $cyber-secondary !important;
    color: $cyber-text-primary !important;

    &:hover {
      background: linear-gradient(45deg, $cyber-secondary-light, $cyber-secondary) !important;
      border-color: $cyber-secondary-light !important;
    }
  }
}

// Element Plus 输入框组件样式重写
.el-input {
  .el-input__wrapper {
    background: $cyber-bg-glass !important;
    border: 1px solid $cyber-border-primary !important;
    border-radius: $cyber-radius-small !important;
    box-shadow: none !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    transition: all $cyber-transition-normal ease !important;

    &:hover {
      border-color: $cyber-primary-light !important;
      box-shadow: none !important;
    }

    &.is-focus {
      border-color: $cyber-primary !important;
      box-shadow: $cyber-shadow-primary !important;
    }
  }

  .el-input__inner {
    color: $cyber-text-primary !important;
    background: transparent !important;
    border: none !important;

    &::placeholder {
      color: $cyber-text-muted !important;
    }
  }
}

// Element Plus 文本域组件样式重写 (type="textarea")
.el-textarea {
  .el-textarea__inner {
    background: $cyber-bg-glass !important;
    border: 1px solid $cyber-border-primary !important;
    border-radius: $cyber-radius-small !important;
    color: $cyber-text-primary !important;
    font-family: inherit !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    padding: 12px 16px !important;
    resize: vertical !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    transition: all $cyber-transition-normal ease !important;
    box-shadow: none !important;
    min-height: 80px !important;

    &:hover {
      border-color: $cyber-primary-light !important;
      box-shadow: none !important;
    }

    &:focus {
      border-color: $cyber-primary !important;
      box-shadow: $cyber-shadow-primary !important;
      outline: none !important;
    }

    &::placeholder {
      color: $cyber-text-muted !important;
      font-style: italic !important;
    }

    // 滚动条样式
    &::-webkit-scrollbar {
      width: 6px !important;
    }

    &::-webkit-scrollbar-track {
      background: rgba(26, 26, 46, 0.3) !important;
      border-radius: 3px !important;
    }

    &::-webkit-scrollbar-thumb {
      background: rgba(50, 236, 138, 0.3) !important;
      border-radius: 3px !important;
      transition: all $cyber-transition-fast ease !important;

      &:hover {
        background: rgba(50, 236, 138, 0.5) !important;
      }
    }
  }

  // 字数统计样式
  .el-input__count {
    color: $cyber-text-muted !important;
    font-size: 12px !important;
    background: rgba(26, 26, 46, 0.8) !important;
    padding: 2px 6px !important;
    border-radius: $cyber-radius-small !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
  }

  // 禁用状态样式
  &.is-disabled {
    .el-textarea__inner {
      background: rgba(26, 26, 46, 0.3) !important;
      border-color: rgba(50, 236, 138, 0.2) !important;
      color: $cyber-text-muted !important;
      cursor: not-allowed !important;
    }
  }

  // 错误状态样式
  &.is-error {
    .el-textarea__inner {
      border-color: $cyber-secondary !important;
      box-shadow: 0 0 8px rgba(255, 107, 107, 0.3) !important;
    }
  }

  // 成功状态样式
  &.is-success {
    .el-textarea__inner {
      border-color: $cyber-accent !important;
      box-shadow: 0 0 8px rgba(0, 255, 127, 0.3) !important;
    }
  }
}

// Element Plus 标签组件样式重写
.el-tag {
  background: rgba(50, 236, 138, 0.1) !important;
  border: 1px solid $cyber-border-primary !important;
  border-radius: $cyber-radius-small !important;
  color: $cyber-primary !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;

  &.el-tag--success {
    background: rgba(0, 255, 127, 0.1) !important;
    border-color: $cyber-accent !important;
    color: $cyber-accent !important;
  }

  &.el-tag--warning {
    background: rgba(255, 193, 7, 0.1) !important;
    border-color: rgba(255, 193, 7, 0.3) !important;
    color: #ffc107 !important;
  }

  &.el-tag--danger {
    background: rgba(255, 107, 107, 0.1) !important;
    border-color: $cyber-secondary !important;
    color: $cyber-secondary !important;
  }

  .el-tag__close {
    color: inherit !important;
    transition: all $cyber-transition-fast ease !important;

    &:hover {
      background: rgba(255, 255, 255, 0.1) !important;
      color: inherit !important;
    }
  }
}

// Element Plus 对话框组件样式重写
.el-dialog {
  background: $cyber-bg-card !important;
  border: 1px solid $cyber-border-primary !important;
  border-radius: $cyber-radius-large !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: $cyber-shadow-card, $cyber-shadow-primary !important;

  .el-dialog__header {
    background: transparent !important;
    border-bottom: 1px solid $cyber-border-primary !important;
    padding: $cyber-spacing-lg !important;

    .el-dialog__title {
      color: $cyber-text-primary !important;
      font-weight: 600 !important;
      font-size: 18px !important;
    }

    .el-dialog__headerbtn {
      .el-dialog__close {
        color: $cyber-text-secondary !important;
        font-size: 20px !important;
        transition: all $cyber-transition-normal ease !important;

        &:hover {
          color: $cyber-primary !important;
          transform: scale(1.1) !important;
        }
      }
    }
  }

  .el-dialog__body {
    background: transparent !important;
    color: $cyber-text-primary !important;
    padding: $cyber-spacing-lg !important;
  }

  .el-dialog__footer {
    background: transparent !important;
    border-top: 1px solid $cyber-border-primary !important;
    padding: $cyber-spacing-lg !important;
  }
}

// Element Plus 遮罩层样式重写
.el-overlay {
  background: $cyber-bg-overlay !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
}

// Element Plus 表单组件样式重写
.el-form {
  .el-form-item {
    .el-form-item__label {
      color: $cyber-text-primary !important;
      font-weight: 500 !important;
    }

    .el-form-item__error {
      color: $cyber-secondary !important;
      font-size: 12px !important;
    }
  }
}

// Element Plus 选择器组件样式重写
.el-select {
  .el-select__wrapper {
    background: $cyber-bg-glass !important;
    border: 1px solid $cyber-border-primary !important;
    border-radius: $cyber-radius-small !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;

    &:hover {
      border-color: $cyber-primary-light !important;
    }

    &.is-focused {
      border-color: $cyber-primary !important;
      box-shadow: $cyber-shadow-primary !important;
    }
  }

  .el-select__placeholder {
    color: $cyber-text-muted !important;
  }

  .el-select__selected-item {
    color: $cyber-text-primary !important;
  }
}

// Element Plus 下拉菜单样式重写
.el-select-dropdown {
  background: $cyber-bg-card !important;
  border: 1px solid $cyber-border-primary !important;
  border-radius: $cyber-radius-small !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: $cyber-shadow-card !important;

  .el-select-dropdown__item {
    color: $cyber-text-primary !important;
    transition: all $cyber-transition-fast ease !important;

    &:hover {
      background: rgba(50, 236, 138, 0.1) !important;
      color: $cyber-primary !important;
    }

    &.is-selected {
      background: rgba(50, 236, 138, 0.2) !important;
      color: $cyber-primary !important;
      font-weight: 600 !important;
    }
  }
}

// Element Plus 消息提示组件样式重写
.el-message {
  background: $cyber-bg-card !important;
  border: 1px solid $cyber-border-primary !important;
  border-radius: $cyber-radius-small !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: $cyber-shadow-card, $cyber-shadow-primary !important;
  color: $cyber-text-primary !important;

  &.el-message--success {
    border-color: $cyber-accent !important;
    box-shadow: $cyber-shadow-card, $cyber-shadow-accent !important;

    .el-message__icon {
      color: $cyber-accent !important;
    }
  }

  &.el-message--warning {
    border-color: rgba(255, 193, 7, 0.3) !important;
    box-shadow: $cyber-shadow-card, 0 0 15px rgba(255, 193, 7, 0.3) !important;

    .el-message__icon {
      color: #ffc107 !important;
    }
  }

  &.el-message--error {
    border-color: $cyber-secondary !important;
    box-shadow: $cyber-shadow-card, $cyber-shadow-secondary !important;

    .el-message__icon {
      color: $cyber-secondary !important;
    }
  }

  &.el-message--info {
    border-color: $cyber-border-primary !important;
    box-shadow: $cyber-shadow-card, $cyber-shadow-primary !important;

    .el-message__icon {
      color: $cyber-primary !important;
    }
  }

  .el-message__content {
    color: $cyber-text-primary !important;
  }

  .el-message__closeBtn {
    color: $cyber-text-secondary !important;
    transition: all $cyber-transition-fast ease !important;

    &:hover {
      color: $cyber-primary !important;
    }
  }
}

// Element Plus 通知组件样式重写
.el-notification {
  background: $cyber-bg-card !important;
  border: 1px solid $cyber-border-primary !important;
  border-radius: $cyber-radius-large !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: $cyber-shadow-card, $cyber-shadow-primary !important;

  &.el-notification--success {
    border-color: $cyber-accent !important;
    box-shadow: $cyber-shadow-card, $cyber-shadow-accent !important;
  }

  &.el-notification--warning {
    border-color: rgba(255, 193, 7, 0.3) !important;
    box-shadow: $cyber-shadow-card, 0 0 15px rgba(255, 193, 7, 0.3) !important;
  }

  &.el-notification--error {
    border-color: $cyber-secondary !important;
    box-shadow: $cyber-shadow-card, $cyber-shadow-secondary !important;
  }

  .el-notification__title {
    color: $cyber-text-primary !important;
    font-weight: 600 !important;
  }

  .el-notification__content {
    color: $cyber-text-secondary !important;
  }

  .el-notification__icon {
    &.el-icon--success {
      color: $cyber-accent !important;
    }

    &.el-icon--warning {
      color: #ffc107 !important;
    }

    &.el-icon--error {
      color: $cyber-secondary !important;
    }

    &.el-icon--info {
      color: $cyber-primary !important;
    }
  }

  .el-notification__closeBtn {
    color: $cyber-text-secondary !important;
    transition: all $cyber-transition-fast ease !important;

    &:hover {
      color: $cyber-primary !important;
    }
  }
}

// Element Plus 消息框组件样式重写
.el-message-box {
  background: $cyber-bg-card !important;
  border: 1px solid $cyber-border-primary !important;
  border-radius: $cyber-radius-large !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: $cyber-shadow-card, $cyber-shadow-primary !important;

  .el-message-box__header {
    background: transparent !important;
    border-bottom: 1px solid $cyber-border-primary !important;
    padding: $cyber-spacing-lg !important;

    .el-message-box__title {
      color: $cyber-text-primary !important;
      font-weight: 600 !important;
      font-size: 18px !important;
    }

    .el-message-box__headerbtn {
      .el-message-box__close {
        color: $cyber-text-secondary !important;
        font-size: 20px !important;
        transition: all $cyber-transition-normal ease !important;

        &:hover {
          color: $cyber-primary !important;
          transform: scale(1.1) !important;
        }
      }
    }
  }

  .el-message-box__content {
    background: transparent !important;
    color: $cyber-text-primary !important;
    padding: $cyber-spacing-lg !important;

    .el-message-box__container {
      .el-message-box__status {
        &.el-icon--success {
          color: $cyber-accent !important;
        }

        &.el-icon--warning {
          color: #ffc107 !important;
        }

        &.el-icon--error {
          color: $cyber-secondary !important;
        }

        &.el-icon--info {
          color: $cyber-primary !important;
        }
      }

      .el-message-box__message {
        color: $cyber-text-primary !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
      }
    }

    .el-message-box__input {
      .el-input {
        .el-input__wrapper {
          background: $cyber-bg-glass !important;
          border: 1px solid $cyber-border-primary !important;
          border-radius: $cyber-radius-small !important;
          backdrop-filter: blur(10px) !important;
          -webkit-backdrop-filter: blur(10px) !important;

          &:hover {
            border-color: $cyber-primary-light !important;
          }

          &.is-focus {
            border-color: $cyber-primary !important;
            box-shadow: $cyber-shadow-primary !important;
          }
        }

        .el-input__inner {
          color: $cyber-text-primary !important;
          background: transparent !important;

          &::placeholder {
            color: $cyber-text-muted !important;
          }
        }
      }

      .el-message-box__errormsg {
        color: $cyber-secondary !important;
        font-size: 12px !important;
      }
    }
  }

  .el-message-box__btns {
    background: transparent !important;
    border-top: 1px solid $cyber-border-primary !important;
    padding: $cyber-spacing-lg !important;
    text-align: right !important;

    .el-button {
      margin-left: 10px !important;

      &:first-child {
        margin-left: 0 !important;
      }

      &.el-button--primary {
        background: $cyber-gradient-primary !important;
        border-color: $cyber-primary !important;
        color: $cyber-text-primary !important;

        &:hover {
          background: linear-gradient(45deg, $cyber-primary-light, $cyber-primary) !important;
          border-color: $cyber-primary-light !important;
        }
      }

      &.el-button--default {
        background: $cyber-bg-glass !important;
        border: 1px solid $cyber-border-primary !important;
        color: $cyber-text-primary !important;

        &:hover {
          background: rgba(50, 236, 138, 0.1) !important;
          border-color: $cyber-primary !important;
          color: $cyber-text-primary !important;
        }
      }
    }
  }
}

// Element Plus 加载遮罩样式重写
.el-loading-mask {
  background: rgba(10, 10, 10, 0.8) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;

  .el-loading-spinner {
    .el-loading-text {
      color: $cyber-text-primary !important;
      font-weight: 500 !important;
    }

    .circular {
      .path {
        stroke: $cyber-primary !important;
        stroke-width: 3 !important;
      }
    }
  }
}

// Element Plus 表格组件样式重写
.el-table {
  background: transparent !important;
  border: 1px solid $cyber-border-primary !important;
  border-radius: $cyber-radius-small !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;

  .el-table__header {
    background: rgba(26, 26, 46, 0.5) !important;

    th {
      background: transparent !important;
      border-bottom: 1px solid $cyber-border-primary !important;
      color: $cyber-text-primary !important;
      font-weight: 600 !important;
    }
  }

  .el-table__body {
    tr {
      background: transparent !important;

      &:hover {
        background: rgba(50, 236, 138, 0.05) !important;
      }

      td {
        border-bottom: 1px solid $cyber-border-secondary !important;
        color: $cyber-text-primary !important;
      }
    }
  }
}

// Element Plus 分页组件样式重写
.el-pagination {
  .el-pager {
    li {
      background: $cyber-bg-glass !important;
      border: 1px solid $cyber-border-primary !important;
      border-radius: $cyber-radius-small !important;
      color: $cyber-text-primary !important;
      margin: 0 2px !important;
      transition: all $cyber-transition-fast ease !important;

      &:hover {
        background: rgba(50, 236, 138, 0.1) !important;
        border-color: $cyber-primary !important;
        color: $cyber-primary !important;
      }

      &.is-active {
        background: $cyber-gradient-primary !important;
        border-color: $cyber-primary !important;
        color: $cyber-text-primary !important;
      }
    }
  }

  .btn-prev,
  .btn-next {
    background: $cyber-bg-glass !important;
    border: 1px solid $cyber-border-primary !important;
    border-radius: $cyber-radius-small !important;
    color: $cyber-text-primary !important;
    transition: all $cyber-transition-fast ease !important;

    &:hover {
      background: rgba(50, 236, 138, 0.1) !important;
      border-color: $cyber-primary !important;
      color: $cyber-primary !important;
    }
  }
}

// Element Plus 开关组件样式重写
.el-switch {
  .el-switch__core {
    background: $cyber-bg-secondary !important;
    border: 1px solid $cyber-border-primary !important;
    transition: all $cyber-transition-normal ease !important;

    &::after {
      background: $cyber-text-primary !important;
      transition: all $cyber-transition-normal ease !important;
    }
  }

  &.is-checked {
    .el-switch__core {
      background: $cyber-gradient-primary !important;
      border-color: $cyber-primary !important;

      &::after {
        background: $cyber-text-primary !important;
      }
    }
  }
}

// Element Plus 滑块组件样式重写
.el-slider {
  .el-slider__runway {
    background: $cyber-bg-secondary !important;
    border: 1px solid $cyber-border-primary !important;
    border-radius: $cyber-radius-small !important;
  }

  .el-slider__bar {
    background: $cyber-gradient-primary !important;
    border-radius: $cyber-radius-small !important;
  }

  .el-slider__button {
    background: $cyber-text-primary !important;
    border: 2px solid $cyber-primary !important;
    box-shadow: $cyber-shadow-primary !important;
    transition: all $cyber-transition-normal ease !important;

    &:hover {
      transform: scale(1.1) !important;
      box-shadow: $cyber-shadow-primary, 0 0 10px rgba(50, 236, 138, 0.5) !important;
    }
  }
}

// 禁用所有 Element Plus 组件的默认悬停效果
.el-button,
.el-input__wrapper,
.el-tag,
.el-dialog__close,
.el-message-box__close,
.el-select__wrapper,
.el-table th,
.el-table td,
.el-pagination li,
.el-switch__core {
  &:hover {
    transform: inherit !important;
  }
}

// 确保所有组件文字颜色一致
.el-button,
.el-input,
.el-tag,
.el-dialog,
.el-form,
.el-select,
.el-table,
.el-pagination,
.el-message,
.el-notification {
  * {
    color: inherit !important;
  }
}